<template>
  <div class="body">
    <div class="head">
      <div class="left">
        <div class="top_ul">
            <p class="ulborder" @click="details('add')">
              新建优惠券
            </p>
            <p
              :class="
                multipleSelection && multipleSelection.length > 0
                  ? 'update_dels'
                  : 'ulborder'
              "
              @click="dellist()"
            >批量删除
            </p>
        </div>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        ref="dataTable"
        height="60vh"
        :header-cell-style="{
          color: '#3D3D3D',
          'font-size': '22px',
          height: '70px',
          'font-weight': '400',
          'background-color': '#F8F9FB',
          'border-bottom': 'none',
        }"
        stripe
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
        style="width: 100%"
      >
        <el-table-column type="selection" width="46"> </el-table-column>
        <el-table-column
          prop="name"
          label="优惠券名称"
          width="250"
        ></el-table-column>
        <el-table-column
          prop="desp"
          label="券描述"
          width="250"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="优惠券类型"
          width="180"
          align="center">
            <template slot-scope="scope">
            <div v-if="tableData[scope.$index].type == 1">折扣券</div>
            <div v-if="tableData[scope.$index].type == 2">代金券</div>
          </template>
          </el-table-column>
        <el-table-column
          prop="createnum"
          label="总数量"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column prop="status" label="状态" width="180" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-color="#13ce66" :active-value="1"
                    :inactive-value="0" inactive-color="#C1C1C1" @change="changeStatus(scope.row,scope.$index)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="send_num"
          label="库存"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <button @click="details('details', scope.row)">详情</button>
            <button @click="details('edit', scope.row)">编辑</button>
            <button @click="launch(scope.$index, scope.row)">删除</button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagiton">
      <button class="btn-default" type="submit" @click="prePage">
        <i class="el-icon-caret-left"></i>
      </button>
      <button class="btn-defaults" type="submit">{{ current_page }}</button>
      <button
        class="btn-default"
        type="submit"
        @click="nextPage"
        :class="{ disabled: disableds }"
      >
        <i class="el-icon-caret-right"></i>
      </button>
      <div class="remarks">
        共 <span> {{ pagesize }} </span>条当前为第
        <span> {{ currentPage }} </span>页
      </div>
    </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      zt_state: "状态", // 状态
      input3: "", // 搜索内容
      select: "手机号", // 默认选择搜索项
      currentPage: 1, //当前页号
      pagesize: 20, //每页大小
      disableds: false,
      selectionItemIndex: "", // 选中的数据行下标
      frozenNumber: "", // 处理冻结的序号
      // 主数据
      tableData: [],
      multipleSelection: "", // 所选择的主数据
      sels: [], //批量删除选中的值显示
      name: "",
    };
  },
  computed: {
    page_arrs() {
      let { currentPage, pagesize } = this;
      return this.tableData.slice(
        (currentPage - 1) * pagesize,
        currentPage * pagesize
      );
    },
    current_page() {
      return this.currentPage;
    },
  },
  methods: {
    //表格换色
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex; // 给row附上index下标方便删除操作
      if (rowIndex % 2 === 0) {
        return "success-row";
      } else {
        return "warning-row";
      }
      return "";
    },
    //分页
    prePage() {
      this.disableds = false;
      if (this.currentPage == 1) {
        return;
      }
      this.currentPage = this.currentPage - 1;
        this.coupon(); // 数据查询
    },
    // 切换页码
    nextPage() {
      if (this.currentPage == Math.ceil(this.tableData.length)) {
        return;
      }
      this.currentPage = this.currentPage + 1;
      this.coupon();
    },
    // 跳转详情页面
    // 参数obj：details详情，add新建，edit编辑
    details(obj, row) {
      console.log(obj, "obj");
      let view_id = obj === "add" ? "" : row;
      this.$router.push({
        path: "./AddCoupon",
        query: { state: obj, row: view_id },
      });
    },
    // 序号选择操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection, "啊哈");
    },
    // 批量删除列表数据
    dellist() {
      if (this.multipleSelection && this.multipleSelection.length > 0) {
        this.$confirm("此操作将删除所选数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let id = this.multipleSelection.map((item) => item.id).join(); //所选中id用，隔开
          console.log(id, "111");
          this.$axios({
            method: "post",
            url: "Coupon/del_coupon",
            params: {
              ids: id,
            },
          })
            .then((res) => {
              this.coupon();
              this.$refs.dataTable.clearSelection(); //清除之前的选中状态
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        });
      } else {
        this.$message({
          type: "error",
          message: "没有选中任何数据!",
        });
      }
    },
    // 优惠券列表
    coupon() {
      this.$axios({
        method: "post",
        url: "Coupon/index",
        params: {
          page: this.currentPage,
          size: this.pagesize,
        },
      }).then((res) => {
        // console.log(res, "优惠券");
        this.tableData = res.data.data;
        let length=res.data.data.length
        console.log(length,'长苏')
        if(res.data.data.length<20){
          this.disableds=true
        }else{
          this.disableds=false
        }
      });
    },
    // 删除
    launch(index, row) {
      this.$confirm("确定要删除轮播图吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "post",
            url: "Coupon/del_coupon",
            params: {
              ids: row.id,
            },
          }).then((res) => {
            if (res.status) {
              this.coupon();
              this.$message({
                type: "success",
                message: "删除成功",
              });
            }
          });
        })
        .catch((err) => {
          this.loading = false;
          this.$message({
            type: "error",
            message: "删除失败",
          });
        });
    },
    search(){
      console.log(this.zt_state,'状态')
      console.log(this.input3,'input')
    },
    changeStatus(row,index){
      console.log(row.status,'状态')
    }
  },
  created() {
    this.coupon();
  },
};
</script>
<style src="../../components/css/marketing_css/marketinglist.css"  scoped></style>
<style scoped>
</style> 